<template>
	<view class="container">
		<!-- 主要内容 -->
		<view class="info-card">
			<image src="../../../static/sourceofgoods/duigo.png"></image>
			<view class="success-message">货源已发布成功</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">货源编号</text>
					<text class="value">{{goodsInfo.sourceid}}</text>
				</view>

				<view class="info-item">
					<text class="label">货物名称</text>
					<text class="value">{{goodsInfo.cargoname}}</text>
				</view>

				<view class="info-item">
					<text class="label">发布运量</text>
					<text class="value">{{ goodsInfo.totalweight}} 吨</text>
				</view>

				<view class="info-item">
					<text class="label">司机服务费率</text>
					<text class="value">{{ goodsInfo.driverservicerate }} %</text>
				</view>

				<view class="info-item">
					<text class="label">油费</text>
					<text class="value">{{ goodsInfo.fuelcost }} 元/车</text>
				</view>

				<view class="info-item">
					<text class="label">信息费</text>
					<text class="value">{{ goodsInfo.informationfee }} 元/车</text>
				</view>

				<view class="info-item">
					<text class="label">亏吨扣费</text>
					<text class="value">{{ goodsInfo.lossprice }}</text>
				</view>

				<view class="info-item">
					<text class="label">预存运费</text>
					<text class="value">{{ goodsInfo.yprice }} 元</text>
				</view>

				<view class="info-item">
					<text class="label">货源开始时间</text>
					<text class="value">{{ goodsInfo.starttime }}</text>
				</view>
			</view>
		</view>
		<view class="dibu">
			<view class="footer-text" @click="goToHome">返回首页</view>
			<view class="footer-text" style="margin-bottom: 40rpx;" @click="viewGoods">查看货源</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		http
	} from '@/config/request.js'
	import "@/config/request.js";

	// 货源信息
	const goodsInfo = ref({})
	// 返回首页
	const goToHome = () => {
		uni.switchTab({
			url: "/pages/homepage/index"
		})
	}
	const qingqiu = async (sourceid) => {
		const res = await http({
			url: '/selectHuoYuanw/' + sourceid,
			method: 'GET'
		})
		console.log(res)
		goodsInfo.value = res.shuju
		if (res.shuju.yprice==0||res.shuju.informationfee==0) {
			goodsInfo.value.yprice = 0
			goodsInfo.value.informationfee = 0
			}else{
				goodsInfo.value.yprice = res.shuju.yprice
				goodsInfo.value.informationfee = res.shuju.informationfee
			}

	}
	// 查看货源
	const viewGoods = () => {
		uni.navigateTo({
			url: '/pages/sourceofgoods/pageinfo/sourcedetails?sourceid=' + goodsInfo.value.sourceid
		})
	}

	onLoad((options) =>{
	  const id = options.sourceid;
	  qingqiu(id)
	  // 你可以根据这个 id 再去请求详情接口
	})
</script>

<style lang="scss">
	/* 全局样式 */
	page {
		background-color: #002fa7;
	}

	.container {
		display: flex;
		flex-direction: column;
		min-height: 90vh;
		padding: 0;
	}

	/* 主要内容区域 */

	/* 信息卡片样式 - 蓝色背景填满左右 */
	.info-card {
		background-color: #002fa7;
		padding: 40rpx 30rpx;
		margin: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.info-card image {
		width: 230rpx;
		height: 230rpx;
		margin-left: 230rpx;
		margin-bottom: 30rpx;
	}

	.success-icon {
		width: 150rpx;
		height: 150rpx;
		display: block;
		margin: 0 auto 30rpx;
	}

	.success-message {
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		margin-bottom: 50rpx;
	}

	/* 信息列表样式 */
	.info-list {
		padding: 0 20rpx;
	}

	.info-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding: 25rpx 0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		width: 30%;
	}

	.value {
		font-size: 28rpx;
		color: #ffffff;
		width: 70%;
		text-align: right;
		word-break: break-word;
	}

	.dibu {
		background-color: #ffffff;
		border-radius: 25rpx 25rpx 0 0;
	}

	.footer-text {
		width: 75%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 32rpx;
		padding: 20rpx 60rpx;
		border-radius: 10rpx;
		color: #ffffff;
		background-color: #002fa7;
		text-align: center;
		margin-left: 35rpx;
		margin-top: 30rpx;
	}
</style>